<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>颜色规范-ZPCode UI Kits</title>
  <link rel="stylesheet" href="http://zx4.com:8001/kits/css/zpcode.min.css">
  <link rel="stylesheet" href="../statics/css/index.css">
  <link rel="stylesheet" href="../statics/highlight/styles/github-dark.min.css">
  <!--zpcode.min.js-->
  <script src="http://zx4.com:8001/kits/webcomponents/ZPElement.js" type="module" defer></script>
  <script src="http://zx4.com:8001/kits/webcomponents/search/style01.js" type="module" defer></script>
  <!--zpcode.min.js-->
  <script src="../statics/webcomponents/layout/leftnav.js" type="module" defer></script>
  <script src="../statics/webcomponents/layout/footer.js" type="module" defer></script>
  <script src="../statics/webcomponents/table/compatibility.js" type="module" defer></script>
  <script src="../statics/js/usage/colors.js" type="module" defer></script>
  <script src="../statics/js/extra.js" type="module" defer></script>
</head>
<body class="dark">
  <div class="mih12p f">
    <left-nav current="colors"></left-nav>
    <div class="fa bl1" style="width:0">
      <div class="c ma mt48 pb48">
        <h1>颜色规范</h1>
        <hr>
        <h2 id="custom"># 主题定制</h2>
        <p>ZPCode UI Kits 设计规范上支持一定程度的样式定制，以满足主题多样化需求，包括但不限于主色、次色、大小、圆角、边框和部分组件的视觉定制。</p>
        <p>👇<b class="txt-w">组件的样式是高度内聚的，与外部样式并无关联；但外部 CSS 变量可以对 Web Component 内部的 CSS 变量进行穿透覆盖</b>。如果您引用了官方全局样式文件，以下是官方全局通用 CSS 变量，组件 CSS 变量请另参阅对应的组件文档：</p>
        <pre class="pr"><code class="hljs language-css zp-colors-globalcssfile"></code></pre>
        <pre class="pr"><code class="hljs language-css zp-colors-custom"></code></pre>

        <hr class="mt36 mb36">
        <h2 id="usage"># 如何使用</h2>
        <p>您可以在您的 CSS 定制文件中，重写定义好的 CSS 变量值，达到覆盖默认主题风格的目的：</p>
        <pre class="pr"><code class="hljs language-css zp-colors-rewrite"></code></pre>
        <p>或者在 Web Components 组件的行内样式中重写 CSS 变量，达到局部变量而不影响全局变量：</p>
        <pre class="pr"><code class="hljs language-xml zp-colors-inner"></code></pre>

      </div>
      <zp-footer></zp-footer>
    </div>
    <div class="w200">
      <ul class="bl1 p0 mt48 pl24 ps t48 lh30">
        <li><a href="#custom" class="txt-con txt-p-h">颜色定制</a></li>
        <li><a href="#usage" class="txt-con txt-p-h">如何使用</a></li>
        <li class="mt12"><a href="#" class="txt-cg txt-b-h fs12">▲ 顶部</a></li>
      </ul>
    </div>
  </div>
  <script src="../statics/highlight/highlight.min.js"></script>
  <script src="../statics/highlight/languages/xml.min.js"></script>
  <script src="../statics/highlight/languages/css.min.js"></script>
</body>
</html>